<template>
	<div>
		<match-league :sportId="sportId" :league-id="leagueId" :leagueName="leagueName" />
		<div class="flex items-center">
			<match-live-logo />
			<match-live-time
				class="mx-[2px]"
				:liveGameState="liveGameState"
				:sportId="sportId"
				:date="date" />
			<match-live-video :channel="channel" :eventId="eventId" :sportId="sportId" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import MatchLeague from '../match-league/index.vue'
import MatchLiveLogo from '../match-live-logo/index.vue'
import MatchLiveTime from '../match-live-time/index.vue'
import MatchLiveVideo from '../match-live-video/index.vue'
import { LiveGameState } from '@/types'
import { SportsType } from '@/enums'
defineProps({
	eventId: {
		type: String,
		default: ''
	},
	sportId: {
		type: String as PropType<SportsType>
	},
	liveGameState: {
		type: Object as PropType<LiveGameState>
	},
	date: {
		type: [Date, String, Number],
		default: null
	},
	channel: {
		type: String,
		default: ''
	},
	leagueId: {
		type: String,
		default: ''
	},
	leagueName: {
		type: String,
		default: ''
	}
})
</script>
